<template>
	<ul class="product-list">
		<li v-for="prod in products" :key="prod.id" class="product-item">
			<view class="thumb">
				<img :src="prod.image" :alt="prod.title" />
			</view>
			<view class="info">
				<h3 class="title">{{ prod.title }}</h3>
				<p class="price">¥{{ prod.price.toFixed(2) }}</p>
				<p class="status">{{ getStatusText(prod.status) }}</p>
			</view>
			<view class="actions">
				<view class="top-toggle" @click="toggleTop(prod)">
					<span v-if="prod.isTop" class="is-top">已置顶</span>
					<span v-else class="to-top">↑ 置顶</span>
				</view>
				<view>
					<button
						class="buy-btn"
						@click="
							goToDetail(
								prod.id
									? prod
									: {
											id: 66,
											title: '唐太医逆糖丹1',
											price: 999.99,
											image: '/static/list.png',
											status: 'on_sale',
											isTop: true,
											order: 0
									  }
							)
						"
					>
						立即购买
					</button>
				</view>
			</view>
		</li>
	</ul>
</template>
<script>
export default {
	data() {
		return {
			prod: null,
			products: [
				{ id: 1, title: '唐太医逆糖丹1', price: 999.99, image: '/static/list.png', status: 'on_sale', isTop: true, order: 0 },
				{ id: 2, title: '唐太医逆糖丹2', price: 999.99, image: '/static/list.png', status: 'on_sale', isTop: false, order: 1 },
				{ id: 3, title: '唐太医逆糖丹3', price: 999.99, image: '/static/list.png', status: 'on_sale', isTop: false, order: 2 },
				{ id: 4, title: '唐太医逆糖丹4', price: 999.99, image: '/static/list.png', status: 'on_sale', isTop: false, order: 3 },
				{ id: 5, title: '唐太医逆糖丹5', price: 999.99, image: '/static/list.png', status: 'on_sale', isTop: false, order: 4 },
				{ id: 6, title: '唐太医逆糖丹6', price: 999.99, image: '/static/list.png', status: 'on_sale', isTop: false, order: 5 }
			]
		};
	},
	methods: {
		getStatusText(status) {
			return (
				{
					on_sale: '已售' + Math.floor(Math.random() * 1000),
					off_sale: '下架',
					sold_out: '售罄'
				}[status] || '未知'
			);
		},
		toggleTop(prod) {
			// 先从数组中移除该商品
			const idx = this.products.findIndex((p) => p.id === prod.id);
			this.products.splice(idx, 1);
			// 切换置顶状态
			prod.isTop = !prod.isTop;
			if (prod.isTop) {
				// 置顶：插入到数组最前面
				this.products.unshift(prod);
			} else {
				// 取消置顶：找到合适的插入位置
				let insertIdx = this.products.findIndex((p) => !p.isTop && p.order > prod.order);
				if (insertIdx === -1) {
					// 未找到时插入到末尾
					insertIdx = this.products.length;
				}
				this.products.splice(insertIdx, 0, prod);
			}
		},
		goToDetail(prod) {
			uni.navigateTo({
				url: `/pages/list/list?id=${prod.id}`
			});
		}
	}
};
</script>
<style scoped>
.product-list {
	padding: 0;
	margin: 0;
	list-style: none;
	background-color: #f6f6f8;
	padding: 12px;
	/* height: 105px; */
}

.product-item {
	padding: 12px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #fff;
	/* border-bottom: 1px solid #eee; */
	border-radius: 10px;
	margin-top: 12px;
}

.thumb {
	width: 78px;
	height: 81px;
}

.thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 10px;
}

.info {
	flex: 1;
	margin-left: 12px;
	height: 81px;
	/* padding-top: 12px 0 12px 0; */
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	/* align-items: baseline; */
}

.title {
	font-family: Source Han Sans CN;
	font-weight: 500;
	font-size: 16px;
	line-height: 100%;
	letter-spacing: 0%;
	vertical-align: middle;
	color: #303030;
}

.price {
	flex: 1;
	font-family: Source Han Sans CN;
	font-weight: 500;
	font-size: 16px;
	line-height: 100%;
	letter-spacing: 0%;
	vertical-align: middle;
	padding-top: 5px;
	color: linear-gradient(101.01deg, #fe511f 5.29%, #fd8139 97.57%);
	/* 添加渐变效果 */
	background: linear-gradient(101.01deg, #fe511f 5.29%, #fd8139 97.57%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-fill-color: transparent;
}

.status {
	font-family: Source Han Sans CN;
	font-weight: 350;
	font-size: 10px;
	line-height: 100%;
	letter-spacing: 0%;
	vertical-align: middle;
	color: rgba(113, 113, 113, 1);
	/* padding-top: 25px; */
}

.buy-btn {
	width: 100px;
	height: 30px;
	border-radius: 20px;
	background: linear-gradient(101.01deg, #fe511f 5.29%, #fd8139 97.57%);
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-family: Source Han Sans CN;
	font-weight: 500;
	font-size: 16px;
	line-height: 100%;
	letter-spacing: 0%;
	vertical-align: middle;
	/* margin-top: 70px; */
}

.actions {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: space-between;
	height: 81px;
}

.top-toggle {
	font-size: 12px;
	cursor: pointer;
	margin-bottom: 8px;
}

.is-top {
	color: #fd5420;
}

.to-top {
	color: #303030;
}
</style>
